<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
    <link href="{{ url_for('static',filename='css/cms.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/question_bank.css') }}" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>后台管理</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h2>老年人心理健康评估：后台管理</h2>
        <div>
            <h2>Admin</h2>
            <i-button @click="logout">退出</i-button>
        </div>
    </header>
    <div class="main">
        <aside class="sidebar">
            <ul>
                <li><a href="/cms">首&nbsp;&nbsp;页</a></li>
                <li><a href="/user_control">用户管理</a></li>
                <li class="active"><a href="/question_bank">题库管理</a></li>
            </ul>
        </aside>
        <main class="content">
            <tabs type="card">
                <tab-pane :label="q.title" v-for="q in data">
                    <p class="tips">[[ q.tips ]]</p>
                    <collapse>
                        <panel :name="quizzes.title" v-for="(quizzes,index) in q.quizzes">
                            [[quizzes.title]]
                            <div slot="content">
                                <ul>
                                    <i-button @click="add(q.id,index)" style="margin-bottom: 20px">增加题目</i-button>
                                    <li class="item" v-for="t in quizzes.quizzes">
                                        <span>[[ t.title ]]</span>
                                        <button-group size="small" style="float: right">
                                            <i-button size="small" @click="edit(t.id,t.title)">
                                                编辑
                                            </i-button>
                                            <i-button size="small" @click="del(q.id,index,t.id)">
                                                删除
                                            </i-button>
                                        </button-group>
                                    </li>
                                </ul>
                            </div>
                        </panel>
                    </collapse>
                </tab-pane>
            </tabs>
        </main>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            data:{{ context.q|safe }},
            edit_after: {
                id: '',
                title: ''
            },
            edit_add: {
                tid: '',
                index: '',
                title: ''
            }
        },
        mounted: function () {

        },
        methods: {
            {#添加#}
            add(tid, index) {
                this.edit_add.tid = tid
                this.edit_add.index = index
                this.$Modal.confirm({
                    render: (h) => {
                        return h('div', [
                            h('h3', {
                                style: {margin: '0 0 20px 5px'}
                            }, '添加题目'),
                            h('Input', {
                                props: {
                                    autofocus: true,
                                    placeholder: '请输入题目……'
                                },
                                on: {
                                    input: (val) => {
                                        vm.edit_add.title = val
                                        console.log(vm.edit_add.title)
                                    }
                                }
                            })
                        ])
                    },
                    closable: true,
                    onOk: () => {
                        let params = new FormData
                        params.append('action', 'add')
                        params.append('tid', this.edit_add.tid)
                        params.append('index', this.edit_add.index)
                        params.append('title', this.edit_add.title)
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                vm.data = res.data.data
                                this.$Message['success']({
                                    background: true,
                                    content: '添加成功！'
                                });
                            } else {
                                this.$Message['error']({
                                    background: true,
                                    content: '添加失败！'
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消添加');
                    }
                })
            },
            {#显示编辑框#}
            edit(id, title) {
                this.edit_after = {
                    id: id,
                    title: title
                }
                this.$Modal.confirm({
                    render: (h) => {
                        return h('div', [
                            h('h3', {
                                style: {margin: '0 0 20px 5px'}
                            }, '修改题目 ID:' + vm.edit_after.id),
                            h('Input', {
                                props: {
                                    value: vm.edit_after.title,
                                    autofocus: true,
                                },
                                on: {
                                    input: (val) => {
                                        vm.edit_after.title = val
                                        console.log(vm.edit_after.title)
                                    }
                                }
                            })
                        ])
                    },
                    closable: true,
                    onOk: () => {
                        vm.alter()
                    },
                    onCancel: () => {
                        this.$Message.info('取消修改');
                    }
                })
            },
            {#提交修改#}
            alter() {
                let params = new FormData
                params.append('action', 'alter')
                params.append('tid', this.edit_after.id)
                params.append('title', this.edit_after.title)
                axios.post('', params).then(res => {
                    if (res.data.state) {
                        this.data = res.data.data
                        this.$Message['success']({
                            background: true,
                            content: '修改成功！'
                        });
                    } else {
                        this.$Message['error']({
                            background: true,
                            content: '修改失败！'
                        });
                    }
                })
            },
            {#删除#}
            del(tid, index, qid) {
                console.log(tid, index, qid)
                let params = new FormData
                params.append('action', 'del')
                params.append('tid', tid)
                params.append('index', index)
                params.append('qid', qid)
                axios.post('', params).then(res => {
                    if (res.data.state) {
                        this.data = res.data.data
                        this.$Message['success']({
                            background: true,
                            content: '删除成功！'
                        });
                    } else {
                        this.$Message['error']({
                            background: true,
                            content: '删除失败！'
                        });
                    }
                })
            },
            {#退出登录#}
            logout() {
                Cookies.remove('secret_key');
                window.location.href = '/admin'
            }
        }
    });
</script>
</html>
